<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>爱奇异视频播放列表</title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			.box{
				width:1000px;
				margin: 0 auto;
			}
			li h4:nth-of-type(1) {
				font-size: 18px;
				color: #4d4d4d;
				line-height: 40px;
			}
			li{
				display: inline-block;
				padding: 10px;
				margin-right: 5px;
				transition: all 1s;
			}
			li p:nth-of-type(1) {
				color: #640000;
				font-size: 14px;
			}
			
			li p:nth-of-type(2) {
				font-size: 12px;
				color: blue;
			}
			img{
				border-radius: 10px;
			}
			ul	li:hover{
					background-color:#F5F9FC;;
					box-shadow:0px 5px 5px rgba(33,150,240,0.34),0 0 10px 0 rgba(33,150,240,0.3);
					border-radius:10px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<h3>热播</h3>
			<ul>
				<li>
					<img src="image/img1.png" alt="" />
					<h4>神武赵子龙</h4>
					<p>怒，林更新不抱网红抱女神</p>
					<p>点击次数：242445次</p>
				</li>
				<li>
					<img src="image/img2.png" alt="" />
					<h4>旋风十一人</h4>
					<p>胡歌变教练在撩前女友</p>
					<p>点击次数：242445次</p>

				</li>
				<li>
					<img src="image/img3.png" alt="" />
					<h4>太阳的后裔</h4>
					<p>宋慧乔吃嫩草</p>
					<p>点击次数：242445次</p>

				</li>
				<li>
					<img src="image/img4.png" alt="" />
					<h4>山海经之赤影传说</h4>
					<p>娜扎张翰再度联手</p>
					<p>点击次数：242445次</p>

				</li>
			</ul>
		</div>
	</body>

</html>